import { createRouter, createWebHistory } from "vue-router"
import NavigationActrive from "@/pages/NavigationActrive.vue"
import NavigationHome from "@/pages/NavigationHome.vue"
import NavigationXQ from "@/pages/NavigationXQ.vue"
// import Detail from "@/pages/Detail.vue"
// import PamasRouter from "@/components/PamasRouter.vue"
import PropsRputer from "@/components/PropsRputer.vue"

import Props from '@/pages/01_props/Father.vue'
import Event from '@/pages/02_custom-event/Father.vue'
import Bus from '@/pages/03_mitt/Father.vue'
import Model from '@/pages/04_v-model/Father.vue'
import AttrsListeners from '@/pages/05_$attrs/Father.vue'
import RefChildrenParent from '@/pages/06_$refs-$parent/Father.vue'
import ProvideInject from '@/pages/07_provide-inject/Father.vue'
import Pinia from '@/pages/08_pinia/Father.vue'
import Slot from '@/pages/09_slot/Father.vue'
import zyy from "@/pages/09_slot_作用域插槽/Father.vue"
import jm from "@/pages/09_slot_具名插槽/Father.vue"
import moren from "@/pages/09_slot_默认插槽/Father.vue"


//创建路由器
const route2 = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/home',
            component: NavigationHome
        },
        {
            name: 'wenzhang',
            path: '/actrive',
            component: NavigationActrive,
            children: [{
                name: "xiangqing",
                // query传参
                // path: 'detail',
                // component: Detail 

                // params传参
                // path: "detail/:id/:name/:age",
                // component: PamasRouter

                //props传递路由
                // path: "detail/:id/:name/:age",
                component: PropsRputer,

                //第一种写法，将路由收到的所有params参数作为props传给路由组件
                // props: true
                //等同于 <PropsRputer :id="" :name="" :age=""/>

                //第二种写法：可以自己决定将什么作为props给路由组件
                path: 'detail',
                props(route) {
                    return route.query
                    // return route.params
                },

                //第三种写法：对象写法，可以自己决定将什么作为props给路由组件   
                // props: {
                //     id: 100,
                //     name: 100,
                //     age: 100
                // }
            }]
        },
        {
            path: '/navigationxq',
            component: NavigationXQ
        },
        //重定向
        {
            path: '/',
            redirect: "/home"
        }
    ]
})


//路由配置
export default createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            component: Props
        },
        {
            path: '/event',
            component: Event
        },
        {
            path: '/mitt',
            component: Bus
        },
        {
            path: '/model',
            component: Model
        },
        {
            path: '/attrs',
            component: AttrsListeners
        },
        {
            path: '/ref-parent',
            component: RefChildrenParent
        },
        {
            path: '/provide-inject',
            component: ProvideInject
        },
        {
            path: '/pinia',
            component: Pinia
        },
        {
            path: '/slot',
            component: Slot 
        },
        {
            path: '/morenslot',
            component: moren 
        },
        {
            path: '/jumingslot',
            component: jm 
        },
        {
            path: '/zyyslot',
            component: zyy 
        },
    ]
})

// export default route